<template>
    <div id="news">
        <div class="news">
            <!--    最热新碟-->
            <div class="new-top">
                <div class="title">
                    <div class="title-left">
                        <div class="icon"><i class="el-icon-service"></i></div>
                        <span class="tit1">热门新碟</span>
                    </div>
                </div>
                <Box4 :getAlbums="hotAlbums"></Box4>
            </div>
            <!-- 全部新碟-->
            <div class="new-bottom">
                <!--标题-->
                <div class="albumsNavBar">
                    <div class="title">
                        <div class="title-left">
                            <div class="icon"><i class="el-icon-service"></i></div>
                            <span class="tit1"><span>全部</span>新碟</span>
                            <span class="ti1"
                                  :class="index === activeNum ? 'active' : ''"
                                  v-for="(item,index) in areaSort"
                                  :key="index"
                                  @click="areaItem(index)">
                        <span class="line">|</span> {{item.name}} </span>
                        </div>
                    </div>
                </div>
                <!-- 展示新碟列表 -->
                <div class="content">
                    <list-card
                            :listCardData="albumsList.albums"
                            @clickListCardItem="clickListCardItem"
                    ></list-card>
                </div>
                <!-- 分页 -->
                <div class="page" v-if="albumsList.albums">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="albumsList.total"
                            :page-size="30"
                            small
                            :current-page="currentPage"
                            @current-change="pageChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Box4 from "@/components/Main/Box4";
    import ListCard from "@/components/listCard/ListCard";

    export default {
        name: "ContentFive",
        components: {
            Box4, ListCard
        },
        data() {
            return {
                // titles: ['华语', '韩国', '日本', '欧美'],
                activeNum: 0,
                hotAlbums: [],
                type: 'hot',
                currentTag: {},
                currentPage: 1,
                albumsList: {},
                areaSort: [
                    {area: 'All', name: "全部"},
                    {area: 'ZH', name: "华语"},
                    {area: 'EA', name: "欧美"},
                    {area: 'KR', name: "韩国"},
                    {area: 'JP', name: "日本"}
                ],
            }
        },
        methods: {
            async getAllNewAlbums() {
                await this.$request("/album/new", {
                    area: this.area,
                    offset: (this.currentPage - 1) * 30,
                }).then((res) => {
                    console.log(res);
                    this.albumsList = res.data;
                    // console.log(this.albumsList);
                });
            },
            //请求最热门新碟
            async getHotAlbums() {
                await this.$request("/album/newest").then((res) => {
                    // console.log(res);
                    this.hotAlbums = res.data.albums.slice(3);
                    // console.log(this.hotAlbums)
                });
            },
            areaItem(index) {
                if (this.activeNum === index) {
                    return;
                }
                this.activeNum = index;
                console.log(this.areaSort[index].area);
                this.area = this.areaSort[index].area;
                // 先清空list 再请求数据
                this.albumsList = {};
                this.currentPage = 1;
                this.getAllNewAlbums();
            },
            //当页数发生改变时  page是当前页数
            pageChange(page) {
                this.currentPage = page;
                this.getAllNewAlbums();
            },
            clickListCardItem(id) {
                console.log(id);
                this.$router.push({ name: "album", params: { id: id } });
                // this.$router.push({ name: "musicListDetail", params: { id } });
                // console.log(123);
            },
        },
        created() {
            this.getHotAlbums(),
                this.getAllNewAlbums()
        },
    }
</script>

<style scoped>
    #news {
        background-color: #f7f7f7;
    }

    .news {
        width: 900px;
        height: 100%;
        margin: auto;
        border-left: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        overflow-y: hidden;
        background-color: white;
    }
    .news .new-top{
        margin-top: 10px;
    }
    .news .new-bottom .content{
        padding: 20px 10px 0 10px;
    }
    .title .icon {
        display: inline;
        font-size: 25px;
        padding: 5px;
        color: #20B2AA;
    }
    .title .line{
        padding: 0 5px;
    }
    .tit1 {
        margin-right: 30px;
        font-size: 25px;
    }

    .ti1 a {
        color: #8c8c8c;
        padding: 5px;
        text-decoration: none;
    }

    /deep/ .ti1 a:hover {
        color: #40E0D0;
        text-decoration: underline;
    }

    .active {
        color: #40E0D0;
        background-color: rgba(214, 255, 246, 0.5);
        border-radius: 11px;
    }
    .page{
        margin-bottom: 50px;
    }
    .page .el-pagination {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #40E0D0;
}
</style>